<template>
  <div>
    <MBX level1="商品管理" level2="添加商品"></MBX>
    <el-card class="mt16">
      <el-steps :active="activename * 1" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- tabs -->
      <!-- tab-click鼠标选中 -->
      <!-- tab-remove鼠标离开 -->
      <!-- before-leave鼠标离开之前，里面有两个参数，新的和旧的 -->
      <!--  v-model="activename"   name值 -->
      <el-tabs
        tab-position="left"
        @tab-click="handclick"
        :before-leave="beforleave"
        v-model="activename"
        class="mt16"
      >
        <el-tab-pane label="基本信息" name="0">
          <!-- <el-form :rules="rules"> -->
          <el-form>
            <el-form-item label="商品名称">
              <el-input v-model="form.goods_name"> </el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input type="number" value="0" v-model="form.goods_price">
              </el-input>
            </el-form-item>
            <el-form-item label="商品重量">
              <el-input type="number" value="0" v-model="form.goods_weight">
              </el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input type="number" value="0" v-model="form.goods_number">
              </el-input>
            </el-form-item>
            <p>{{ value }}----{{ lastnum }}</p>
            <el-form-item label="商品分类" prop="cate">
              <el-cascader
                v-model="value"
                :options="optionslist"
                :props="peizhixiqnag"
                @change="handleChange"
              ></el-cascader
            ></el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 动态 里面还需要循环判断 -->
        <el-tab-pane label="商品参数" name="1">
          <el-form>
            <el-form-item
              :label="item1.attr_name"
              v-for="item1 in donglist"
              :key="item1.attr_id"
            >
              <!-- 动态 -->
              <el-checkbox-group v-model="item1.attr_vals" size="small">
                <el-checkbox
                  v-for="(item2, index) in item1.attr_vals"
                  :key="index"
                  :label="item2"
                  border
                ></el-checkbox>
                <!-- </el-checkbox-group> -->
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 静态 直接v-model -->

        <el-tab-pane label="商品属性" name="2">
          <el-form>
            <el-form-item
              :label="item2.attr_name"
              v-for="item2 in jinglist"
              :key="item2.attr_id"
            >
              <el-input v-model="item2.attr_vals"> </el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 上传图片 -->
        <el-tab-pane label="商品图片" name="3">
          <el-upload
            class="upload-demo"
            action="http://www.ysqorz.top:8888/api/private/v1/upload"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            list-type="picture"
            :headers="headersConfig"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-tab-pane>
        <!-- 富文本 -->
        <el-tab-pane label="商品内容" name="4">
          <quill-editor v-model="form.goods_introduce"> </quill-editor>
          <el-button type="primary" @click="addshopbtn">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { shopcateApi, djcateApi, addshopApi } from '@/http/api'
export default {
  name: 'addshopA',
  data() {
    return {
      // 配置上传请求头
      headersConfig: {
        Authorization: sessionStorage.getItem('token')
      },
      activename: '0',
      form: {
        pics: []
      },
      // rules: {
      //   goods_name: [
      //     { required: true, message: '请输入商品名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   goods_weight: [
      //     { required: true, message: '请输入商品重量', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   goods_number: [
      //     { required: true, message: '请输入商品数量', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   cate: [
      //     { required: true, message: '请输入商品数量', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ]
      // },
      //   级联选择器配置项
      peizhixiqnag: {
        expandTrigger: 'hover',
        children: 'children',
        label: 'cat_name',
        value: 'cat_id'
      },
      //   级联选择器的数据源options
      optionslist: [],
      //   级联选择器后选中的三个id
      value: [],
      // 动态-商品参数
      donglist: [],
      jinglist: []
      // 上传图片
    }
  },
  created() {
    this.handleChange()
  },
  methods: {
    // 添加商品
    async addshopbtn() {
      // 处理商品分类，转换为字符串
      this.form.goods_cat = this.value.join(',')
      // 处理商品参数
      // 处理动态参数
      const dongl = this.donglist.map((item) => {
        return {
          attr_id: item.attr_id,
          attr_value: item.attr_vals.join(',')
        }
      })
      // 处理静态参数
      const jingl = this.jinglist.map((item) => {
        return {
          attr_id: item.attr_id,
          attr_value: item.attr_vals
        }
      })
      // 合并动态静态
      const suml = [...dongl, ...jingl]
      this.form.attrs = suml
      console.log('新商品信息', this.form)
      // 添加给后台
      const res = await addshopApi(this.form)
      console.log(res)
      this.$router.push('/goods')
    },
    // 添加图片
    handleSuccess(res) {
      console.log(res)
      const picObj = { pic: res.data.tmp_path }
      this.form.pics.push(picObj)
      console.log('上传图片', this.form)
    },
    // 删除图片
    handleRemove(res) {
      console.log(res)
    },
    // 动态、静态渲染
    async handclick() {
      console.log(this.lastnum)
      if (this.activename === '1') {
        const res = await djcateApi(this.lastnum)
        res.forEach((item) => {
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(',') : []
        })
        this.donglist = res
        console.log('动态', this.donglist)
      } else if (this.activename === '2') {
        const res = await djcateApi(this.lastnum, 'only')
        this.jinglist = res
        console.log('动态', this.jinglist)
      }
    },
    async handleChange() {
      const res = await shopcateApi()
      console.log(res)
      this.optionslist = res
    },
    // 如果没有选中就直接跳出
    beforleave(newname, oldname) {
      console.log('新', newname)
      console.log('旧', oldname)
      console.log('name', this.activename)
      // 如果没有选中就直接跳出
      if (oldname === '0' && this.value.length !== 3) {
        this.$message({
          message: '请先选择商品分类',
          type: 'error'
        })
        return false
      }
    }
    // 动态获取---商品参数
  },
  computed: {
    lastnum() {
      const last = this.value.at(-1)
      return last
    }
  }
}
</script>

<style>
.el-scrollbar__wrap {
  height: 300px !important;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 200px;
}
</style>

<style lang="scss" scoped>
::v-deep .el-step__title {
  font-size: 14px;
}
</style>
